{% extends base %}

{% block head %}
<script type="text/javascript" src="/static/lib/vue/vue-2.2.6.min.js"></script>
{% end %}

{% block body %}

{% init bind_html = """
<a v-bind:href="url">Baidu</a>
<a class="tag" v-bind:class="tagClass">Tag</a>
<a class="tag" v-for="tag in tagList" v-bind:class="tag.tagClass">{{tag.name}}</a>
""" %}

<script id="bindExampleHtml" type="text/example">
{% raw bind_html %}
</script>

<div id="app" class="card top-offset-1">
        
    <div class="marked-contents">
        <span class="marked-contents-title">目录</span>
        <ul>
            <li v-for="heading in headingList" v-bind:style="{'margin-left': heading.marginLeft }">
                <a v-bind:href="heading.href">{{!heading.name}}</a>
            </li>
        </ul>
    </div>
    
    <h2>声明式渲染</h3>

    <!-- {# `{{!` 用来转义 #} -->

    <p>{{! message }}</p>

    <!-- {# title中间不能有`-` #} -->

    <div v-bind:title="bindmessage">
        鼠标悬停几秒钟查看此处动态绑定的提示信息！
    </div>

    <h2>条件与循环</h2>
    <h3>v-if v-else-if v-else</h3>
    <p v-if="seen">现在你看到我了</p>
    <p v-else-if="Math.random() > 0.4"> Math.random() > 0.4 </p>
    <p v-else>看不到我</p>

    <h3 id="heading-v-for">v-for</h3>
    <p>v-for指自身元素重复</p>
    <ol>
        <li v-for="file in files">
            {{! file }}
        </li>
    </ol>

    <ul>
        <li v-for="(file, index) in files">
            {{! index }} - {{! file }}
        </li>
    </ul>

    <ul>
        <li v-for="(value, key, index) in person">
            {{! index }} - {{! key}} = {{! value }}
        </li>
    </ul>

    <ul>
        <span v-for="n in 10">{{! n }} , </span>
    </ul>

    <h2>处理用户输入</h2>
    <h4>v-on</h4>
    <button v-on:click="reverseMessage">逆转消息</button>

    <h4>v-model双向绑定</h4>
    <input v-model="message" />

    <h2>其他模板语法</h2>
    <h4>v-once</h4>
    <span v-once>This will never change: {{!message}}</span>

    <h4>v-html</h4>
    <div v-html="rawHtml"></div>

    <h4 id="bindExample">v-bind动态绑定</h4>

    <h4>参数绑定</h4>
    <pre class="marked-code" v-text="bindExampleHtml"></pre>

    <blockquote>效果</blockquote>

    <div class="row top-offset-1 bottom-offset-1">
        {% raw bind_html %}
    </div>


    <h4>JavaScript 表达式</h4>
    <div> {{! message + " >>>" }} </div>

    <h4>修饰符</h4>
    <form v-on:submit.prevent="onSubmit">
        <button>submit</button>
    </form>

    <h4>过滤器</h4>
    {{! message | toUpperCase }}

    <h4>过滤器串联</h4>
    {{! message | toUpperCase | length }}

    <h4>过滤器加参数</h4>
    {{! message | appendStr('arg2', 'arg3') }}

    <h4>v-bind:href缩写:href</h4>
    <a v-bind:href="url">Baidu</a>
    <a :href="url">Baidu</a>

    <h4>v-on:click缩写@click</h4>
    <button @click="onShortClick">Click Me</button>

    <h4>onclick获取本元素</h4>
    <button @click="onGetAttr($event)" role="test">Click Me</button>

    <h2>vue+layer</h2>
    <button @click="onShowLayerMsg">展示</button>
    <div id="vueMsgDialog" v-show="showLayerMsg">
        <div class="card">
            <div class="row">
                <span>{{!layerMsg}}</span>
            </div>
            <div class="row">
                <span>{{!layerCounter}}</span>
                <button @click="layerCounterInc">全局计数器+1</button>
            </div>
            <div class="row">
                <div v-for="item in counterList">
                    <span>{{!item.value}}</span>
                    <button @click="layerCounterInc2(item)">局部计数器{{!item.name}}+1</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            headingList: [],
            bindExampleHtml: $("#bindExampleHtml").html(),
            message: "Hello, Vue!",
            files: ["file1", "file2"],
            person: {
                name: "Jhon",
                age: 20,
            },
            bindmessage: "页面加载于 " + new Date(),
            seen: false,
            rawHtml: "{{!message}}",
            url: "https://www.baidu.com",
            tagClass: "lightblue",
            tagList: [
                {
                    name: "Tag1",
                    tagClass: "info",
                },
                {
                    name: "Tag2",
                    tagClass: "gray",
                }
            ],
            layerMsg: "hello, vue-layer",
            showLayerMsg: false,
            layerCounter: 0,
            counterList: [
                {
                    name: "计数器A",
                    value: 0,
                },
                {
                    name: "计数器B",
                    value: 0,
                },
            ],
        },
        methods: {
            reverseMessage: function () {
                this.message = this.message.split('').reverse().join('');
            },
            onSubmit: function () {
                alert("submit");
            },
            onShortClick: function () {
                alert("Click缩写");
            },
            onGetAttr: function (event) {
                var el = event.currentTarget;
                alert("role:" + $(el).attr("role"));
            },
            onShowLayerMsg: function () {
                // this.showLayerMsg = true;
                layer.open({
                    type: 1,
                    title: "Hello",
                    content: $("#vueMsgDialog"),
                })
            },
            layerCounterInc: function() {
                this.layerCounter++;
            },
            layerCounterInc2: function(item) {
                item.value++;
            },
        },
        filters: {
            toUpperCase: function (value) {
                if (!value) return ''
                value = value.toString()
                return value.toUpperCase();
            },
            length: function (value) {
                if (!value) return 0;
                return value.length;
            },
            appendStr: function (arg1, arg2, arg3) {
                return arg1 + arg2 + arg3;
            }
        },
        // 生命周期
        beforeCreated: function () {

        },

        created: function () {

        },

        beforeMount: function () {
            // 编译完成 
        },

        mounted: function () {
            // 模型加载完毕， 渲染之前
        },

        beforeDestroy: function () {

        },

        destroyed: function () {
            //
        }
    });

    app.files.push("pushed file");

    (function() {
        var minLevel = 10;
        var elements = [];

        $("h1,h2,h3,h4").each(function (idx, ele) {
            $(ele).attr("id", "heading-" + idx);
            var tagName = $(ele)[0].tagName.toUpperCase();
            var level = parseInt(tagName.substring(1));
            minLevel = Math.min(minLevel, level);
        });

        $("h1,h2,h3,h4").each(function (idx, ele) {
            var tagName = $(ele)[0].tagName.toUpperCase();
            var level = parseInt(tagName.substring(1));
            var heading = {
                id: $(ele).attr("id"),
                name: $(ele).text(),
                href: "#" + $(ele).attr("id"),
                marginLeft: (level-minLevel) * 20 + "px",
            }
            app.headingList.push(heading);
        });
    })();

</script>

{% end %}